<template>
  <div>
    <!-- 这里直接写两种样式, 根据数据决定显示 -->
    <div class="normalPost" v-if="postData.type == 1">
      <div class="header">
        <span class="iconfont iconjiantou2"></span>
        <div class="logoWrapper">
          <span class="iconfont iconnew"></span>
        </div>
        <!-- 对关注按钮, 用对象的形式动态设置 class 类名, 如果未关注则是红色底白字 -->
        <!-- key: value 的形式对应 类名: 是否添加这个类的布尔值 -->
        <div
          class="btnFollow"
          :class="{
                    hasFollow: postData.has_follow,
                    notFollow: !postData.has_follow
                  }"
          @click="handleFollow"
        >{{postData.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="title">{{postData.title}}</div>
      <div class="info">{{postData.user.nickname}} {{postData.create_date.split('T')[0]}}</div>
      <div class="content" v-html="postData.content">
        <!-- {{postData.content}} -->
      </div>
    </div>

    <div class="videoPost" v-if="postData.type == 2">
      <video
        src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
        controls
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
      ></video>
      <div class="info">
        <img src="@/assets/logo.png" alt class="avatar" />
        <div class="name">{{postData.user.nickname}}</div>
        <!-- 对关注按钮, 用对象的形式动态设置 class 类名, 如果未关注则是红色底白字 -->
        <!-- key: value 的形式对应 类名: 是否添加这个类的布尔值 -->
        <div
          class="btnFollow"
          :class="{
                    hasFollow: postData.has_follow,
                    notFollow: !postData.has_follow
                  }"
          @click="handleFollow"
        >{{postData.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="title">{{postData.title}}</div>
    </div>

    <div class="btns">
      <div class="btn like" :class="{hasLike: postData.has_like}" @click="handleLike">
        <span class="iconfont icondianzan"></span>
        {{postData.like_length}}
      </div>
      <div class="btn weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>

    <div class="comments">
      <h2>精彩跟帖</h2>
      <div class="list" v-if="commentList.length > 0">
        <CommentMain v-for="comment in commentList" :key="comment.id" :commentData="comment" />
        <div class="btnMoreComment" @click="$router.push('/morecomment?id='+$route.query.id)">更多跟帖</div>
      </div>
      <div v-else class="empty">暂无跟帖, 抢占沙发</div>
    </div>

    <CommentInput @reloadComments="loadComments" />
  </div>
</template>

<script>
import CommentMain from "@/components/Comment/Main";
import CommentInput from "@/components/Comment/InputDom";
export default {
  components: {
    CommentMain,
    CommentInput,
  },
  data() {
    return {
      postData: {},
      commentList: [],
    };
  },
  // 创建页面时, 就获取当前文章 id
  // 发送请求获取文章数据
  created() {
    console.log("当前文章 id = ", this.$route.query.id);
    this.$axios({
      url: "/post/" + this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      this.postData = res.data.data;
    });

    this.loadComments();
  },
  methods: {
    loadComments() {
      // 在获取文章数据的同时, 可以发送请求获取评论列表
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      }).then((res) => {
        const { data } = res.data;

        if (data.length > 3) {
          data.length = 3;
        }

        this.commentList = data;
        console.log(data);
      });
    },
    handleFollow() {
      console.log("处理关注问题");
      // 关注和取消关注都是触发这个函数, 但是
      // 两个请求不是同一个接口, 需要先确认当前状态
      // 发出不同请求
      // 1. 如果已关注, 发出取消请求
      if (this.postData.has_follow) {
        this.$axios({
          // url 的 id 是文章 id 但是现在关注针对的是用户
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          // 成功发送请求后, 可以整个页面数据重新获取, 对于是否关注一个用户这种占比不大,重要性也不高的数据来说
          // 直接修改当前 data 也是 ok 的
          if (res.data.message == "取消关注成功") {
            this.postData.has_follow = false;
          }
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          if (res.data.message == "关注成功") {
            this.postData.has_follow = true;
          }
        });
      }
      // 2. 如果未关注,发出关注请求
    },
    handleLike() {
      // 点赞后要数字加一
      // 取消后要数字减一

      console.log("处理点赞功能");
      this.$axios({
        // 点赞是关于文章的, 直接获取 url 上带的数据即可
        url: "/post_like/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data);
        // 发送完, 虽然是同一个接口, 但是响应不一样
        // 我们就可以根据响应, 来修改当前信息
        if (res.data.message == "点赞成功") {
          // 1. 修改是否已经点赞
          this.postData.has_like = true;
          // 2. 修改点赞数量
          this.postData.like_length += 1;
        } else if (res.data.message == "取消成功") {
          this.postData.has_like = false;
          this.postData.like_length -= 1;
        }
      });
    },
  },
};
</script>

.<style lang="less" scoped>
.normalPost {
  padding: 0 10/360 * 100vw;
  .header {
    display: flex;
    align-items: center;
    .iconnew {
      font-size: 54/360 * 100vw;
      padding-left: 10/360 * 100vw;
    }
  }
  .logoWrapper {
    flex: 1;
  }
  .title {
    font-size: 18/360 * 100vw;
    font-weight: bold;
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
    margin: 10/360 * 100vw 0;
  }
  .content {
    /deep/ img {
      max-width: 100%;
    }
  }
}

.videoPost {
  .info {
    padding: 10/360 * 100vw;
    display: flex;
    .avatar {
      height: 26/360 * 100vw;
      width: 26/360 * 100vw;
      object-fit: cover;
    }
    .name {
      flex: 1;
      padding-left: 10/360 * 100vw;
    }
  }
  .title {
    padding-left: 10/360 * 100vw;
    font-size: 16/360 * 100vw;
  }
  video {
    width: 100%;
  }
}

.btns {
  display: flex;
  justify-content: space-around;
  margin: 40/360 * 100vw;
  .btn {
    line-height: 30/360 * 100vw;
    border: 1px solid #888;
    padding: 0 14/360 * 100vw;
    border-radius: 16/360 * 100vw;
    &.hasLike {
      border-color: red;
      color: red;
    }
  }
  .iconweixin {
    color: #00c100;
  }
}

.btnFollow {
  font-size: 12/360 * 100vw;
  border: 1px solid #bbb;
  color: #888;
  line-height: 28/360 * 100vw;
  padding: 0 16/360 * 100vw;
  border-radius: 14/360 * 100vw;
  &.notFollow {
    background: red;
    border-color: red;
    color: #fff;
  }
}

.comments {
  border-top: 4px solid #e4e4e4;
  h2 {
    text-align: center;
    padding: 24/360 * 100vw 0;
    font-size: 20/360 * 100vw;
  }
  .empty {
    font-size: 16/360 * 100vw;
    color: #888;
    line-height: 100/360 * 100vw;
    text-align: center;
  }
  .btnMoreComment {
    margin: 80/360 * 100vw auto;
    font-size: 14/360 * 100vw;
    line-height: 26/360 * 100vw;
    padding: 0 14/360 * 100vw;
    border: 1px solid #888;
    border-radius: 14/360 * 100vw;
    width: 120/360 * 100vw;
    text-align: center;
  }
}
</style>